﻿@{
    ViewBag.Title = "SliderList";
}

<div id="cphMain_ctl00_ContentPane" class="center">
    <div id="Breadcrumb" class="Breadcrumb">
        <ul>
            <li class="first">
                <a href='javascript:;' onclick="javascript:loadAction('Index2','Main')">
                    Trang chủ
                </a>
            </li>            
            <li >
                <a href='javascript:;' onclick="javascript:loadAction('personal','Account')">
                    Tài khoản của tôi
                </a>
            </li>            
            <li>
                <span>Danh sách Sliders</span>
            </li>
        </ul>
    </div>

<div class="Account-Module DefaultModule">
    
<div class="Block DefaultModule">
    

    <div id="CartHeader" class="Block Moveable Panel">
        <h2>
            Danh sách Sliders
        </h2>
    </div>

    <div id="CartContainer" class="Block Moveable Panel">

        <div class="BlockContent">
            @if (Model != null)
            {
                
                    <div class="Clear">
                        <form action="/Admin/AddSlider" method="post" enctype="multipart/form-data">
                            <img id="blah" src="#" alt="your image" style="display:none;" height="200"/><br />
                            <div>
                            <div class="FloatLeft">
                            
                            <input type="file" accept="image/*" style="width:300px" name="image_link"
                                id="image_link"/>
                        </div>
                        <div class="FloatRight">
                            <input type="submit" value="Thêm Slider mới" />
                        </div>
                                </div>
                            </form>
                    </div>

                    <div class="Clear">
                    </div>

                    <div>
                        <div>

                            <table class="CartContents" cellspacing="0" rules="rows" border="1" id="cphMain_ctl00_ctl01_ctl00_grvList" style="width: 100%; border-collapse: collapse;">
                                <tbody>
                                    <tr>
                                        <th  scope="col">ID
                                        </th>
                                        <th scope="col">
                                            Hình ảnh
                                        </th>                                                                               
                                        <th scope="col">&nbsp;</th>
                                    </tr>
                                    
                                    @foreach (var slider in Model)
                                    {
                                        <tr>
                                            <td style="vertical-align: middle;">                                                
                                                @slider.ID
                                            </td>
                                            <td align="center">                                                
                                                <img src="/Content/data/images/sliders/@slider.image_link" height="200" width="400"/>                                               
                                            </td>
                                                                       
                                            <td  style="width: 1px;vertical-align: middle;">
                                                <a href="javascript:;" onclick="javascript:removeSlider(@slider.ID)" class="myBtn1">Xóa</a>
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>

                        </div>

                    </div>

                    
                
            }
            
        </div>
    </div>        
</div>


</div>
</div>
<script type="text/javascript">
    //preview hinh anh sau khi chon file
    (function ($) {
        function readURL(input) {
            var $prev = $('#blah');

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $prev.attr('src', e.target.result);

                }

                reader.readAsDataURL(input.files[0]);

                $prev.show();
            } else {
                $prev.hide();
            }
        }

        $('#image_link').on('change', function () {
            readURL(this);
        });
    })(jQuery);
</script>